<template>
    <el-scrollbar height="891px">
        
        <div class="projectMsgContain">
            
            <!-- 标题 -->
            <div class="projectMsgHead">
                <div class="projectMsgHeadLeft">
                    <svg class="projectMsgHeadLeft-icon" aria-hidden="true">
                        <use xlink:href="#icon-diqiu"></use>
                    </svg>
                    <span class="projectMsgHeadLeft-span">{{project.proName}}</span>
                    <el-dropdown>
                        <el-button :disabled="!edit" size='mini' style="width:60px;padding:0px;margin:5px 10px 0px 20px" round>{{project.status}}</el-button>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item v-for="item in status" :key="item" @click="statusChange(item)">{{item}}</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                    <el-dropdown>
                        <el-button :disabled="!edit" size='mini' style="width:80px;padding:0px;margin:5px 0px 0px 0px" round type='success'>{{project.type}}项目</el-button>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item v-for="item in type" :key="item" @click="typeChange(item)">{{item}}</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                    </el-dropdown>
                </div>

                <div class="projectMsgHeadRight">
                    <div class="createTime">
                        <p class="projectMsgHeadRight-up"><span>创建时间</span></p>
                        <p><span class="firstWord">{{createTime[0]}}</span><span class="otherWord"> / {{createTime[1]}}</span><span class="otherWord"> / {{createTime[2]}}</span></p>
                    </div>
                    <div style="border-left:1.5px solid #eee;margin:25px 0px"></div>
                    <div class="dayVisit">
                        <p class="projectMsgHeadRight-up"><span>今日访问</span></p>
                        <p><span class="firstWord">26</span></p>
                    </div>
                    <div style="border-left:1.5px solid #eee;margin:25px 0px"></div>
                    <div class="sumVisit">
                        <p class="projectMsgHeadRight-up"><span>累计访问</span></p>
                        <p><span class="firstWord">126</span></p>
                    </div>
                </div>
            </div>

            <!-- 主要内容 -->
            <div class="projectMsgMain">
                <div class="projectMsgMain-left">
                    <div class="basicMsg">
                        <span class="basicMsg-title">基本信息</span>
                        <div v-if="!edit">
                            <svg class="edit-icon" aria-hidden="true">
                                <use xlink:href="#icon-banshou"></use>
                            </svg>
                            <el-button type="text" class="basicMsg-edit" @click="openEdit">修改</el-button>
                        </div>
                        <div v-else>
                            <svg class="confirmEdit-icon" aria-hidden="true">
                                <use xlink:href="#icon-queren"></use>
                            </svg>
                            <el-button type="text" class="basicMsg-edit-confirm" @click="confirmEdit">确定</el-button>
                            <svg class="cancelEdit-icon" aria-hidden="true">
                                <use xlink:href="#icon-quxiao"></use>
                            </svg>
                            <el-button type="text" class="basicMsg-edit-cancel" @click="cancelEdit">取消</el-button>
                        </div>
                        <div class="basicMsg-main">
                            <div class="client">
                                <p class="basicMsg-main-up"><span>委托单位</span></p>
                                <el-input v-if="edit" class="client-contain" v-model="project.client"></el-input>
                                <p v-else><span class="client-contain">{{project.client}}</span></p>
                            </div>
                            <div class="location">
                                <p class="basicMsg-main-up"><span>地点</span></p>
                                <el-input v-if="edit" class="location-contain" v-model="project.location"></el-input>
                                <p v-else><span class="location-contain">{{project.location}}</span></p>
                            </div>
                            <div class="startTime">
                                <p class="basicMsg-main-up"><span>开始时间</span></p>
                                <el-date-picker value-format="YYYY-MM-DD" v-if="edit" v-model="project.startTime" type="date" placeholder="开始日期" class="otherWord" style="width:100%"></el-date-picker>
                                <p v-else><span class="firstWord">{{startTime[0]}}</span><span class="otherWord"> / {{startTime[1]}}</span><span class="otherWord"> / {{startTime[2]}}</span></p>
                            </div>
                            <div class="endTime">
                                <p class="basicMsg-main-up"><span>结束时间</span></p>
                                <el-date-picker value-format="YYYY-MM-DD" v-if="edit" v-model="project.endTime" type="date" placeholder="结束日期" class="otherWord" style="width:100%"></el-date-picker>
                                <p v-else><span class="firstWord">{{endTime[0]}}</span><span class="otherWord"> / {{endTime[1]}}</span><span class="otherWord"> / {{endTime[2]}}</span></p>
                            </div>
                        </div>
                    </div>
                    <div class="basicMsg-desc">
                        <span class="basicMsg-title">项目描述</span>
                        <div class="basicMsg-desc-main">
                            <el-input type="textarea" v-if="edit" class="description" resize="none" v-model="project.description" rows=5></el-input>
                            <div v-else class="description">{{project.description}}</div>
                        </div>
                    </div>
                    <div class="basicMsg-member">
                        <span class="basicMsg-title">人员构成</span>
                        <svg class="edit-icon" aria-hidden="true">
                            <use xlink:href="#icon-bianji"></use>
                        </svg>
                        <el-button type="text" class="basicMsg-edit" @click="addMember">添加</el-button>

                        <div class="basicMsg-member-main">
                            <el-table :data="members" style="width:100%" :header-cell-style="{background:'#FAFAFA',height:'60px',color:'black'}">
                                <el-table-column width="30px"/>
                                <el-table-column show-overflow-tooltip prop="name" label="姓名" width="200px"/>
                                <el-table-column show-overflow-tooltip prop="duty" label="职责" width="150px"/>
                                <el-table-column show-overflow-tooltip prop="description" label="描述" width="320px"/>
                                <el-table-column show-overflow-tooltip prop="time" label="加入时间" width="180px"/>
                                <el-table-column label="操作" prop="mid">
                                    <template #default="scope">
                                        <el-popconfirm title="是否删除该成员?" @confirm="deleteMember(scope.row.mid)" confirmButtonText="确认" cancelButtonText="取消">
                                            <template #reference>
                                                <el-button type="text" size='mini' style="color:orangered">删除</el-button>
                                            </template>
                                        </el-popconfirm>
                                        <el-button type="text" size='mini' @click="editMember(scope.row.mid)">修改</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <el-pagination background layout="prev, pager, next" :total="15" :page-size="5" style="margin:5px 0px 0px 0px"></el-pagination>
                        </div>
                        
                    </div>
                </div>

                <div class="projectMsgMain-right">
                    <div class="todayVisitor">
                        <!-- <span>今日访问统计</span> -->
                        <div id="todayVisitorFig" style="width: 100%;"></div>
                    </div>
                    <div class="allVisitor">
                        <!-- <span>累计访问统计</span> -->
                        <div id="allVisitorFig" style="width: 100%;"></div>
                    </div>
                    <div class="FileFastLink">
                        <span class="basicMsg-title">快速链接</span>
                        <svg class="edit-icon" aria-hidden="true">
                            <use xlink:href="#icon-tianjia"></use>
                        </svg>
                        <el-button type="text" class="basicMsg-edit" @click="addLink">新增</el-button>
                        <el-empty v-if="links.length == 0" :image-size="200"></el-empty>
                        <div class="FileFastLinkList" v-else>
                            <div  v-for="link in links" :key="link.text">
                                <a :href="link.url">{{link.text}}</a>   
                            </div>
                        </div>
                    </div>
                </div>

            </div>

        </div>

    </el-scrollbar>

    <el-dialog v-model="addMemberVisible" title="添加成员" width="20%" custom-class="member-dialog" destroy-on-close>
        <el-form :model="member">
            <el-form-item label="姓名">
                <el-input v-model="member.name" />
            </el-form-item>
            <el-form-item label="职责">
                <el-input v-model="member.duty" />
            </el-form-item>
            <el-form-item label="加入时间">
                <el-date-picker value-format="YYYY-MM-DD" v-model="member.time" type="date" style="width:100%" placeholder="加入时间"/>
            </el-form-item>
            <el-form-item label="描述">
                <el-input v-model="member.description" type="textarea" resize="none" rows="2" />
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="cancelAddMember">取消</el-button>
            <el-button type="primary" @click="confirmAddMember">确认</el-button>
        </template>
    </el-dialog>

    <el-dialog v-model="addLinkVisible" title="新增链接" width="20%" custom-class="link-dialog" destroy-on-close>
        
        <el-form :model="link">
            <el-form-item label="名称">
                <el-input v-model="link.text" />
            </el-form-item>
            <el-form-item label="URL">
                <el-input v-model="link.url" />
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="cancelAddLink">取消</el-button>
            <el-button type="primary" @click="confirmAddLink">确认</el-button>
        </template>
    </el-dialog>


</template>

<script>
import * as echarts from 'echarts'
export default {
    data(){
        return{
            edit: false,
            addMemberVisible: false,
            addLinkVisible: false,
            status:[
                '立项','实施中','已结题'
            ],
            type:[
                '公开','私人'
            ],
            link: {
                text:"",
                url:""
            },
            links: [
                
            ],
            project: {
                proid: "1412412413413",
                status: "实施中",
                type: "公开",
                creater: "admin",
                description: "使用“互联网+地理信息系统（Geographic Information System, GIS）”技术，构建一套水资源评价与管理系统（Water Evaluation And Management System, WEAM），即提供一个可靠、可视化、可扩展的信息系统平台，又可通过互联网直接对数据进行存储、展示以及在不同空间尺度、时间尺度的水供需评价，实现在系统模型中通过调整参数可以模拟水分配、水政策等的预测结果等功能，并使用该系统对研究区水危机时空演变进行应用分析，探究研究区内水危机变化规律和讨论其可能形成机制，有效的辨识水危机节点，为区域水危机管理、水资源开发利用与保护提供决策支持。",
                startTime: '2020-09-23',
                endTime: '2022-09-23',
                location: "广西省铜川市王益区",
                client: "铜川市王益区市财政局",
                createTime: "2021-01-31",
                proName: "铜川市王益区山水林田湖草生态修复工程",
                lng: '130.6',
                lat: '39.9'
            },
            oldProject: {},
            member: {
                name: '皮卡丘',
                time: '2020-09-23',
                description: '负责项目的起草立项，监督实施，结题汇报工作',
                duty: '项目负责人'
            },
            members:[
                {
                    mid: 'awdd1531',
                    name: '皮卡丘',
                    time: '2020-09-23',
                    description: '负责项目的起草立项，监督实施，结题汇报工作',
                    duty: '项目负责人'
                },
                {
                    mid: 'awdd1532',
                    name: '皮卡丘',
                    time: '2020-09-23',
                    description: '负责项目的起草立项，监督实施，结题汇报工作',
                    duty: '项目负责人'
                },
                {
                    mid: 'awdd1533',
                    name: '皮卡丘',
                    time: '2020-09-23',
                    description: '负责项目的起草立项，监督实施，结题汇报工作',
                    duty: '项目负责人'
                },
                {
                    mid: 'awdd1534',
                    name: '皮卡丘',
                    time: '2020-09-23',
                    description: '负责项目的起草立项，监督实施，结题汇报工作',
                    duty: '项目负责人'
                },
                {
                    mid: 'awdd1535',
                    name: '皮卡丘',
                    time: '2020-09-23',
                    description: '负责项目的起草立项，监督实施，结题汇报工作',
                    duty: '项目负责人'
                },
            ]
        }
    },
    computed:{
        createTime(){
            return this.project.createTime.split("-");
        },
        startTime(){
            return this.project.startTime.split("-");
        },
        endTime(){
            return this.project.endTime.split("-");
        }
    },
    methods:{
        statusChange(item){
            this.project.status = item;
        },
        typeChange(item){
            this.project.type = item;
        },
        openEdit(){
            this.oldProject = {...this.project};
            this.edit = true;
        },
        cancelEdit(){
            this.project = {...this.oldProject};
            this.edit = false;
        },
        confirmEdit(){
            // 发送更新请求
            this.edit = false;
        },
        deleteMember(mid){
            console.log("删除请求："+mid);
        },
        editMember(mid){
            console.log("修改请求："+mid);
        },
        addMember(){
            this.addMemberVisible = true;
        },
        addLink(){
            this.addLinkVisible = true;
        },
        cancelAddMember(){
            this.addMemberVisible = false;
        },
        cancelAddLink(){
            this.addLinkVisible = false;
        },
        confirmAddMember(){
            //提交添加成员请求
            console.log("提交添加成员请求");
            this.addMemberVisible = false;
        },
        confirmAddLink(){
            console.log("提交添加链接请求");
            this.addLinkVisible = false;
        },
        todayVisitorFig(){
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('todayVisitorFig'),null,{height:280});
            // 绘制图表
            myChart.setOption({
                title:{
                    text: "今日访问统计"
                },
                tooltip: {},
                xAxis: {
                    data: ['7:00', '8:00', '9:00', '10:00', '11:00', '12:00']
                },
                yAxis: {},
                series: [
                    {
                    name: '访问量',
                    type: 'line',
                    data: [0, 20, 36, 10, 10, 20]
                    }
                ]
            });
        },
        allVisitorFig(){
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('allVisitorFig'),null,{height:280});
            // 绘制图表
            myChart.setOption({
                title:{
                    text: "累积访问统计"
                },
                tooltip: {},
                xAxis: {
                    data: ['2022/01/30', '2022/01/31', '2022/01/32', '2022/01/33', '2022/01/34', '2022/01/35']
                },
                yAxis: {},
                series: [
                    {
                    name: '访问量',
                    type: 'line',
                    data: [0, 40, 56, 110, 110, 120]
                    }
                ]
            });
        }
    },
    mounted(){
        this.todayVisitorFig();
        this.allVisitorFig();
    }
}
</script>

<style>
.member-dialog{
    height: 388px;
}
.link-dialog{
    height: 250px;
}
.projectMsgContain{
    display: flex;
    flex-direction: column;
    margin: 0px 120px 0px 50px;
    /* border: 1px solid #000; */
    height: 100%;
}
.projectMsgHead{
    height: 100px;
    border-bottom: 1.5px solid #eee;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.projectMsgHeadLeft{
    width: 960px;
    /* border: 1px solid #000; */
    height: 100%;
    margin-left: 10px;
    display: flex;
    justify-content: left;
    align-items: center;
}
.projectMsgHeadLeft-icon{
    width: 65px;
    height: 65px;
}
.projectMsgHeadLeft-span{
    font-size: 20px;
    padding-left: 5px;
}
.projectMsgHeadRight{
    /* border: 1px solid #000; */
    width: 450px;
    height: 100%;
    margin-right: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}
.projectMsgHeadRight-up{
    font-size: 14px;
    color: grey;
    padding-bottom: 8px;
}
.firstWord{
    color: black;
    font-size: 20px;
}
.otherWord{
    color: grey;
    font-size: 14px;
}
.createTime{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    width: 150px;
    /* border: 1px solid #000; */
}
.dayVisit{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    width: 100px;
    /* border: 1px solid #000; */
}
.sumVisit{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    width: 100px;
    /* border: 1px solid #000; */
}
.projectMsgMain{
    display: flex;
    flex-direction: row;
    /* border: 1px solid #000; */
    height: 1000px;
    margin: 0px 10px 0px 30px;
}
.projectMsgMain-left{
    /* border: 1px solid #000; */
    height: 100%;
    width: 1000px;
}
.projectMsgMain-right{
    /* border: 1px solid #000; */
    height: 100%;
    margin-left: 80px;
    width: 420px;
}
.todayVisitor{
    /* border: 1px solid rgb(153, 65, 65); */
    margin-top: 30px;
    width: 100%;
}
.allVisitor{
    margin-top: 0px;
    width: 100%;
}
.FileFastLink{
    /* border: 1px solid rgb(153, 65, 65); */
    width: 100%;
    height: 320px;
    position: relative;
}
.FileFastLinkList{
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    position: absolute;
    top: 40px;
    width: 100%;
    height: 85%;
}
.basicMsg{
    /* border: 1px solid #000; */
    height: 200px;
    position: relative;
    top: 40px;
}
.basicMsg-title{
    position: absolute;
    top: 2px;
    left: 10px;
    font-size: 18px;
    color: #484848;
    font-weight: bold;
}
.basicMsg-edit{
    position: absolute;
    top: 4px;
    right: 12px;
    color: #1890FF;
    font-size: 15px;
}
.basicMsg-edit-confirm{
    position: absolute;
    top: 4px;
    right: 75px;
    color: #1890FF;
    font-size: 15px;
}
.basicMsg-edit-cancel{
    position: absolute;
    top: 4px;
    right: 12px;
    color: #ff4500;
    font-size: 15px;
}
.edit-icon{
    position: absolute;
    top: 14px;
    right: 48px;
    height: 20px;
    width: 20px;
}
.confirmEdit-icon{
    position: absolute;
    top: 14px;
    right: 112px;
    height: 20px;
    width: 20px;
}
.cancelEdit-icon{
    position: absolute;
    top: 14px;
    right: 48px;
    height: 20px;
    width: 20px;
}
.basicMsg-desc{
    /* border: 1px solid #000; */
    height: 220px;
    position: relative;
    top: 60px;
}
.basicMsg-member{
    /* border: 1px solid #000; */
    height: 410px;
    position: relative;
    top: 100px;
}
.basicMsg-main{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    position: relative;
    top: 40px;
    height: 150px;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}
.basicMsg-main-up{
    font-size: 16px;
    color: grey;
    padding-bottom: 18px;
    padding-top: 38px;
}
.client{
    width: 200px;
    height: 100%;
}
.client-contain{
    font-size: 18px;
    width: 100%;
}
.location{
    width: 200px;
    height: 100%;
}
.location-contain{
    font-size: 18px;
    width: 100%;
}
.startTime{
    width: 160px;
    height: 100%;
}
.endTime{
    width: 160px;
    height: 100%;
}
.basicMsg-desc-main{
    position: relative;
    top: 40px;
    height: 180px;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}
.description{
    color: #585858;
    font-size: 16px;
    padding: 25px;
    line-height: 25px;
    width: 950px;
}
.basicMsg-member-main{
    position: relative;
    top: 40px;
    height: 340px;
    border-top: 1px solid #eee;
    /* border-bottom: 1px solid #eee; */
}
.projectMsgFoot{
    height: 50px;
}

</style>